<template>
	<view class="flex-col page">

		<view class="flex-col group">
			<view class="flex-col section_2">
				<text class="text_1">选择工作区域</text>
				<view class="justify-between group_1">
					<shop-region :area='areaId' v-model="area" @change="change"></shop-region>
				</view>
				<view class="flex-col items-start text-wrapper"><text class="text_3">详细工作范围</text></view>
				<!-- <text class="text_4">请填写详细商圈或小区</text> -->
				<input type="text" placeholder="请填写详细商圈或小区" v-model="detailed">
			</view>
			<view class="flex-col items-center text-wrapper_1" @click="submit"><text class="text_5">完成</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				detailed: '',
				area: '',
				info: {},
				areaId: ''
			};
		},
		created() {
			this.$http('common.getInfo').then(r => {
				if (r.code == 200) {
					// console.log(r, 'r')
					this.info = r.data;
					this.areaId = r.data.inspectionSettings.provinceId +'-'+ r.data.inspectionSettings.cityId +'-' + r.data.inspectionSettings.areaId ;
					this.detailed = r.data.inspectionSettings.address;
				}
			});
		},
		methods: {
			change(e) {
				console.log(e);
			},
			submit() {
				let area = this.area.split('-')
				this.$http('ours.setAddr', {
					provinceId: area[0],
					cityId: area[1],
					areaId: area[2],
					address: this.detailed
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}

		},
	};
</script>

<style scoped lang="scss">
	uni-input {
		margin-top: 10rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		position: fixed;
	}

	.section_1 {
		padding: 53rpx 31.5rpx 32rpx;
		background-color: #ffffff;
		position: relative;
	}

	.group {
		padding: 20rpx 24rpx 48rpx;
	}

	.image {
		position: absolute;
		left: 31.5rpx;
		bottom: 26.5rpx;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.section_2 {
		padding: 38rpx 15rpx 49rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text-wrapper_1 {
		margin: 665rpx 8rpx 0;
		padding: 19rpx 0 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_1 {
		margin-left: 9rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_1 {
		margin-top: 39rpx;
		padding: 0 9rpx;
	}

	.text-wrapper {
		margin-top: 46rpx;
		padding-top: 39rpx;
		height: 72rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_4 {
		margin-left: 9rpx;
		margin-top: 39rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_1 {
		margin-top: 9rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.text_3 {
		margin-left: 9rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
